<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="__PUBLIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__PUBLIC__/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="__PUBLIC__/css/animate.min.css" rel="stylesheet">
    <link href="__PUBLIC__/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
    <link href="__PUBLIC__/css/style.min.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content" id="detail">
    <div class="row animated fadeInRight">
        <div class="col-sm-8"><!--这里是图片页面-->
            <div class="ibox float-e-margins row">
                <div class="ibox-title">
                    <h5>宠物照片</h5>
                </div>
                <div>
                    <div class="ibox-content no-padding border-left-right">
                        <a class="fancybox" v-for="image in content.img" :href="'../../'+image.url" :title="image.url">
                            <img alt="image" :src="'../../'+image.url" />
                        </a>
                    </div>
                </div>
            </div>
            <div class="ibox float-e-margins row">
                <div class="ibox-title">
                    <h5>描述</h5>
                </div>
                <div class="ibox-content profile-content">
                    <p><i class="fa fa-remaks"></i> <strong>{{content.description}}</strong></p><br />
                </div>
            </div>
        </div>
        <div class="col-sm-4"><!--这里是信息页-->
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>详细信息</h5>
                </div>
                <div class="ibox-content profile-content">
                    <p><i class="fa fa-time"></i> 发布时间:<strong>{{content.time}}</strong></p><br />
                    <p><i class="fa fa-name"></i> 宠物昵称:<strong>{{content.name}}</strong></p><br />
                    <p><i class="fa fa-species"></i> 宠物品种:<strong>{{content.varieties}}</strong></p><br />
                    <p><i class="fa fa-age"></i> 宠物年龄:<strong>{{content.age}}</strong></p><br />
                    <p><i class="fa fa-people"></i> 联 系 人:<strong>{{content.Name}}</strong></p><br />
                    <p><i class="fa fa-number"></i> 联系QQ:<strong>{{content.qq}}</strong></p><br />
                    <p v-if="content.hasReward===1"><i class="fa fa-number"></i> 售价:<strong>{{content.reward}}</strong></p>
                </div><!--这里面是详细信息页-->
                <div class="ibox-content profile-content">
                    <div class="user-button">
                        <div class="row">
                            <div class="col-sm-6"></div>
                            <div class="col-sm-6">
                                <button type="button" class="btn btn-default btn-sm btn-block" v-if="content.adobted===0" v-on:click="confirm">领养</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="__PUBLIC__/js/jquery.min.js?v=2.1.4"></script>
<script src="__PUBLIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/js/layui/layui.all.js"></script>
<script src="__PUBLIC__/js/plugins/fancybox/jquery.fancybox.js"></script>
<script src="__PUBLIC__/js/vue.js"></script>
<script src="__PUBLIC__/js/vue-resource.js"></script>
<script>

    function getQueryVariable(variable) //获取get参数
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    var detail=new Vue({
        el:"#detail",
        data:{
            type:getQueryVariable('type'),
            content:{}
        },
        methods:{
            confirm:function (){
                this.$http.post('ConfirmJson',{to_id:this.content.uid,radar_id:this.content.Id}).then(
                    (data)=>
                    {
                        if(data.body.result==='success')
                        {
                            layer.msg('请等待对方回应');
                            document.write(data.body.msg);
                        }
                        else
                        {
                            layer.msg('操作失败');
                        }
                    }
                )
            }
        },
        created:function () {
            this.$http.get('petDetailJson?pet_id='+getQueryVariable('pet_id')).then(
                (data)=>
                {
                    this.content=data.body;
                }
            )
        }
    });

    $('.fancybox').fancybox({
        openEffect: 'none',
        closeEffect: 'none'
    });
</script>
</body>

</html>
